<template>
  <div>
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @blur="fun(value)">
      <template #action>
        <div @click="go">取消</div>
      </template>
    </van-search>
    <!-- <van-search
      v-model="value"
      left="返回"
      shape="round"
      background="white"
      placeholder="请输入您要搜索的关键字"
      @blur="fun(value)"
    >
    </van-search> -->
    <!-- 搜索发现 -->
    <div class="faxiana">
      <p>最近搜索</p>
      <div class="box">
        <div class="box1" v-for="(v, index) in arr" :key="index">
          {{ v }}
        </div>
      </div>
    </div>
    <div class="faxian">
      <p>搜索发现</p>
      <div class="box">
        <div class="box1" v-for="(v, index) in arr1" :key="index">
          {{ v }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
import { Search } from "vant";

Vue.use(Search);

Vue.use(Icon);
export default {
  data() {
    return {
      value: "",
      arr: ["面霜"],
      arr1: [
        "面霜",
        "赫莲娜",
        "兰蔻",
        "科颜氏",
        "新品来袭-雅诗兰黛",
        "卡地亚",
        "sk-II",
      ],
      img: [],
      text: [],
    };
  },

  methods: {
    fun(value) {
      if (value != "" && this.arr.length <= 5) {
        this.arr.push(value);
        this.value = "";
      } else if (this.arr.length > 5) {
        this.value = "";
      }
    },
    go() {
      this.$router.push("/home");
    }
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: 95vw;
  margin: auto;

  .text {
    height: 67.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3vw 0;

    img {
      height: 67.5px;
    }

    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      width: 65vw;
      height: 4vw;
      font-weight: normal;
      border-bottom: none;
    }

    span {
      width: 5vw;
      height: 5vw;
      font-size: 2vw;
      color: white;
      background-color: red;
      margin-right: 1vw;
      text-align: center;
      border-radius: 2vw;
    }
  }

  p {
    display: block;
    width: 18vw;
    height: 6vw;
    border-bottom: 3px solid #1869c2;
    font-weight: 600;
    padding-bottom: 2vw;
  }
}

.faxian {
  p {
    text-indent: 3.2vw;
    font-weight: 600;
  }

  .box {
    display: flex;
    flex-wrap: wrap;

    .box1 {
      height: 4vw;
      padding: 2vw;
      margin: 2vw 4vw;
      border: 1px solid red;
      font-size: 3vw;
      border-radius: 3vw;
    }
  }
}

.faxiana {
  p {
    text-indent: 3.2vw;
    font-weight: 600;
  }

  .box {
    display: flex;
    flex-wrap: wrap;

    .box1 {
      height: 4vw;
      padding: 2vw;
      margin: 2vw 4vw;
      border: 1px solid gray;
      font-size: 3vw;
      border-radius: 3vw;
    }
  }
}

.bottom {
  width: 100vw;
}

.kong {
  height: 16vw;
}
</style>